<template>
  <div>
    <a-radio-group
      style="margin-left: 10%"
      class="mb-1"
      name="radioGroup"
      v-model:value="dataType"
    >
      <a-radio :value="0">组织架构</a-radio>
      <a-radio :value="1">工作组</a-radio>
    </a-radio-group>

    <a-tree
      v-show="dataType === 0"
      :key="orgKey"
      :expandedKeys="expandedKeys"
      @expand="onExpand"
      @select="onSelect"
      :treeData="organizetreeData"
      :load-data="onLoadData"
      :replaceFields="{ children: 'childs', title: 'name', key: 'id' }"
    />
    <a-tree
      v-show="dataType === 1"
      @select="onSelect"
      :treeData="workingGroupData"
      :replaceFields="{ children: 'childs', title: 'name', key: 'id' }"
    />
  </div>
</template>
<script>
  import { Gettreelist } from '@/api/organize/api'

  export default {
    data() {
      return {
        organizetreeData: [], // 树组件数据
        workingGroupData: [], // 工作组数据
        expandedKeys: [], // 已展开的树节点
        dataType: 0, // 0：组织架构1：工作组
        orgKey: '',
      }
    },
    props: ['loadTime'],
    watch: {
      loadTime() {
        this.reload()
      },
    },
    created() {
      var that = this
      // 加载树控件组织架构初始数据
      Gettreelist({
        type: 0,
        isShowUser: true,
      }).then((res) => {
        if (res.isSuccess) {
          // 默认选中第一个公司
          this.selectedKeys = res.content[0].id
          this.$emit('childByValue', res.content[0])
          res.content[0].childs.forEach((element) => {
            element.isLeaf = !element.hasChilds
          })

          this.organizetreeData = res.content

          that.expandedKeys = [res.content[0].id]
        }
      })
      // 加载树控件初始数据
      Gettreelist({
        type: 1,
        isShowUser: true,
      })
        .then((res) => {
          console.log(res)
          if (res.isSuccess) {
            res.content.forEach((element) => {
              element.isLeaf = true
            })
            this.workingGroupData = res.content
          }
        })
        .catch((err) => {
          console.log(err)
          this.$message.error(err.errormessage)
        })
    },
    methods: {
      reload() {
        var that = this
        this.orgKey = new Date().getTime()
        // 加载树控件组织架构初始数据
        Gettreelist({
          type: 0,
          isShowUser: true,
        }).then((res) => {
          if (res.isSuccess) {
            res.content[0].childs.forEach((element) => {
              element.isLeaf = !element.hasChilds
            })
            that.organizetreeData = res.content
          }
        })
        // 加载树控件初始数据
        Gettreelist({
          type: 1,
          isShowUser: true,
        })
          .then((res) => {
            console.log(res)
            if (res.isSuccess) {
              res.content.forEach((element) => {
                element.isLeaf = true
              })
              this.workingGroupData = res.content
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message.error(err.errormessage)
          })
      },
      onSelect(selectedKeys, info) {
        this.selectedKeys = selectedKeys
        // 传值给父页面
        this.$emit('childByValue', info.node.dataRef)
      },
      // 树控件展开收缩事件
      onExpand(expandedKeys) {
        console.log(expandedKeys)
        // 用户点击展开时，取消自动展开效果
        this.expandedKeys = expandedKeys
      },
      //树控件异步加载
      onLoadData(treeNode) {
        return new Promise((resolve) => {
          if (treeNode.dataRef.childs) {
            console.log('抛出')
            resolve()
            return
          }
          setTimeout(() => {
            Gettreelist({
              type: this.dataType,
              isShowUser: true,
              parentId: treeNode.eventKey,
            }).then((res) => {
              console.log(res)

              if (res.isSuccess) {
                res.content[0].childs.forEach((element) => {
                  element.isLeaf = !element.hasChilds
                })
                treeNode.dataRef.childs = res.content[0].childs
              }
            })

            resolve()
          }, 500)
        })
      },
    },
  }
</script>
 
